<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<html>
<head>
	<title>人事信息管理管理</title>
	<meta name="decorator" content="default"/>
	<script src="${ctxStatic}/datatables/media/js/jquery.dataTables.min.js"></script>
	<script src="${ctxStatic}/datatables/media/js/dataTables.colReorder.min.js"></script>
	<script src="${ctxStatic}/datatables-bootstrap/dataTables.bootstrap.js"></script>
	<link rel="stylesheet" href="${ctxStatic}/datatables-bootstrap/dataTables.bootstrap.css"/>

	<script type="text/javascript">
		$(document).ready(function() {
			$('#dialog').on('click', function(){
				//$.post("${ctx}/schedul/schclass/getList", {}, function(data){
					//if(data['status'])
					$.jBox('get:${ctx}/schedul/schclass/getList', {
						ajaxData: {'schclass':{'schname':'早班'}},
						title: null,
						buttons: []
					})
				//})
			})
		});
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
		
	
	 function testData()
	 {
			   
		 $.ajax({
				"url":"${ctx}/employee/employee/getEmployeeList",
				//"data":schclass,
				"type":"POST",
		   		"dataType":"json",
				"async":false,
				"success":function(data){
					if(data){
						if(!data.success){
							if(null != data.employee){
								
								alert();
								//var schclass=data.schclass;
								//alert(schclass.page.list.length);
																
							    isExist = true;
								return false;
							}else{
								//失败处理
							}
						}
					}
				},
		   		"error":function(error){
		   			alert('网络延迟,请稍后再试!');
		   			return false;
		   		}
			});
		 return ;
	 }
	 
		 
		
		$(function(){
			var table1 = $('#table1'),
				table2 = $('#table2'),
				table3 = $('#table3'),
				selectClassesBox = $('#classes-box'),
				clearBtn = $('#clearBtn'),
				searchForm = $('#searchForm'),
				btnSubmit = searchForm.find('#btnSubmit')
					.on('click', function(){
						table1.fnDraw();
					});
			table1
				.dataTable({
					//serverSide: false,
					ajax: '${ctx}/shift/shift/getShiftList',
					formId: 'searchForm',
					pageLength: $('#pageSize').val()*1,
					columns: [
						{data: function(){
							return '<input type="checkbox" class="ck"/>'
						}},
						{data:'name'},
						{data:'startdate'},
						{data:'enddate'},
					]
				})
				.on('change', '.ck', function(){
					selectClassesBox.find('span').text('');
					table2.fnDraw();
					if(!this.checked) return;
					var data = table1.fnGetData($(this).closest('tr').get(0));
					table1.find('tbody .ck').not(this).prop('checked', false);
					selectClassesBox.find('span').text(data.name);
				});

			var peopleForm = $('#peopleForm');
			peopleForm.on('click', '.btn-submit', function(){
				table2.fnDraw();
			})
			table2
				.dataTable({
					ajax: '${ctx}/employee/employee/getEmployeeList',
					formId: 'peopleForm',
					pageLength: $('#pageSize').val()*1,
					columns: [
						{data: function(){
							return '<input type="checkbox" class="ck"/>'
						}},
						{data:'number'},
						{data:'name'},
						{data:'company', render:function(v){return v.name;}},
						{data:'department'},
					],
					attachParams: function(){
						var schclass = table1.api().row(table1.find('tbody .ck:checked').closest('tr')).data();
						return {
							schclass: schclass ? schclass.id : ''
						}
					},
					drawCallback:function(){

						var checkDataId = [];
						$(table3.api().rows().data().toArray()).each(function(){
							checkDataId.push(this.id);
						})
						this.api().rows().every(function(){
							var $node = $(this.node()),
								data = this.data();
							$node.attr('data-id',data.id);
							if(~checkDataId.indexOf(data.id)){
								$node.hide();;
							}
						})
					}
				})
				.on('change', '.ck', function(e){
					if(!this.checked) return;
					var schclass = table1.api().row(table1.find('tbody .ck:checked').closest('tr')).data();
					if(!schclass){
						this.checked = false;
						return alert('清先选择班次！');
					}
					
					selectClasses([table2.api().row($(this).closest('tr')).data()], true);
				});

			table3
				.dataTable({
					serverSide: false,
					paging: false,
					info:false,
					columns: [
						{data: function(){
							return '<input type="checkbox" class="ck" checked/>'
						}},
						{data:'number'},
						{data:'name'},
						{data:'company', render:function(v){return v.name;}},
						{data:'department'},
					]
				})
				.on('change', '.ck', function(){
					if(this.checked) return;
					selectClasses([table3.api().row($(this).closest('tr')).data()], false);
				});

			clearBtn.on('click', function(){
				selectClasses(table3.api().rows().data().toArray(), false);
			});

			

			function selectClasses(list, isSelected){
				var table2List = table2.api().rows().data().toArray(),
					table3List = table3.api().rows().data().toArray(),
					table2IdMap = {},
					table3IdMap = {};

				for(var key in table2List){
					var item = table2List[key];
					if(table2List.hasOwnProperty(key)) table2IdMap[item['id']] = item;
				}
				for(var key in table3List){
					var item = table3List[key];
					if(table3List.hasOwnProperty(key)) table3IdMap[item['id']] = item;
				}

				list.forEach(function(d){
					if(isSelected){
						if(table2IdMap[d['id']]){
							table2IdMap[d['id']].isHidden = true;
						}
						if(!table3IdMap[d['id']]){
							table3IdMap[d['id']] = d;
							table3List.push(d);
						}
					}else{
						if(table2IdMap[d['id']]){
							table2IdMap[d['id']].isHidden = false;
						}
						if(table3IdMap[d['id']]){
							delete table3IdMap[d['id']]
							table3List.splice(table3List.indexOf(d),1);
						}
					}
				});
				var tableHideRowId = [];
				$(table3List).each(function(){
					if(this.isHidden) tableHideRowId.push(this.id);
				})
				table2.find('tbody tr').each(function(){
					var tr = $(this),
						rowId = tr.data('id');
					tr.find('.ck').prop('checked', false);
					if(~tableHideRowId.indexOf(rowId)){
						tr.hide();
					}else{
						tr.show();
					}
				})
				table3.api().clear();
				table3.api().rows.add(table3List).draw();
			}
			
			$('#saveBtn').click(function(){
				var schclass = table1.api().row(table1.find('tbody .ck:checked').closest('tr')).data(),
					employeeList = table3.api().rows().data().toArray();
				if(!schclass){
					return alert('请选择班次');
				}
				if(employeeList.length == 0){
					return alert('请选择人员')
				}
				console.log(employeeList)
				
				//异步调用
				save(schclass, employeeList);
			})


		});
		
		 function save(schclass, employeeList)
		 {
				   
			 $.ajax({
					"url":"${ctx}/schedul/schedulingInformation/saveData",
					"data":{
						schclassId: schclass.id,
						employeeNumber: employeeList.map(function(d){return d.number}).join(',')
					},
					"type":"POST",
			   		"dataType":"json",
					"async":false,
					"success":function(data){
						if(data){
							if(!data.success){
						      
							}else{
								location.reload();
							}
						}
					},
			   		"error":function(error){
			   			alert('网络延迟,请稍后再试!');
			   			return false;
			   		}
				});
			 return ;
		 }
		
		
	</script>
	
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/schedul/schclass/getSchclassList">班次信息列表</a></li>
	</ul>
	
	<form:form id="searchForm" modelAttribute="schclass" action="${ctx}/shift/shift/getShiftList" method="post" class="breadcrumb form-search">
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<ul class="ul-form">
			<li><label>名称：</label>
				<input  name="name" htmlEscape="false" maxlength="100" class="input-medium"/>
			</li>
			<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="button" value="查询"/>
			</li>	
			<li class="clearfix"></li>
		</ul>
		
	</form:form>
	
	<li >
	<sys:message content="${message}"/>
	<table id="table1" class="table table-striped table-bordered table-condensed">
				<thead>
					<tr>
						<th>选择</th>
						<th>班次</th>
						<th>开始日期</th>
						<th>结束日期</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
	
	<ul class="nav nav-tabs">
		<li class="active"><a>选择人员</a></li>
	</ul>
	
	<div class="panel panel-default">
		<div class="panel-body">
			<p class="text-primary" id="classes-box">当前选择班次: <span></span></p>
			
			<form:form id="peopleForm" modelAttribute="employee" action="${ctx}/employee/employee/getEmployeeList" method="post" class="breadcrumb form-search">
			
				 <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
				<ul class="ul-form">
					<li><label>名称：</label>
						<form:input path="name" htmlEscape="false" maxlength="100" class="input-medium"/>
					</li>
					<li><label>仓库：</label>
						<sys:treeselect id="office" name="office" value="${employee.office.id}" labelName="${employee.office.name}" labelValue="${employee.office.id}"
							title="部门" url="/sys/office/treeData?type=2" cssClass="input-small" allowClear="true" notAllowSelectParent="true"/>
					</li>
		
					<li class="btns">
					<input  class="btn btn-primary btn-submit" type="button" value="查询"/>
					</li>	
					<li class="clearfix"></li>
				</ul>
				
			</form:form>
			<div class="controls controls-row">
				<div style="width:48%; float: left">
					<table id="table2" class="table table-striped table-bordered table-condensed">
						<thead>
							<tr>
								<th>选择</th>
								<th>工号</th>
								<th>姓名</th>
								<th>仓库</th>
								<th>部门</th>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
				<div style="width:48%;float: left;margin-left:4%">
					<a href="javascript:;" id="clearBtn">清除</a>
					<table id="table3" class="table table-striped table-bordered table-condensed">
						<thead>
							<tr>
								<th></th>
								<th>工号</th>
								<th>姓名</th>
								<th>仓库</th>
								<th>部门</th>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
			</div>	
			<div class="btns"><button class="btn btn-primary" id="saveBtn">保存</button></div>
		</div>
	</div>
	

</body>
</html>